<template>
  <div>
    <!-- 搜索和新增部分 -->
    <el-row class="search_content">
      <el-col :span="8">
        账号:
        <el-input
          v-model.trim="account"
          placeholder="请输入内容"
          :clearable="true"
          size="mini"
          maxlength="11"
          @keydown.enter.native="search"
        ></el-input>
      </el-col>
      <el-col :span="8">
        用户名
        <el-input
          v-model.trim="userName"
          placeholder="请输入内容"
          :clearable="true"
          size="mini"
          maxlength="11"
          @keydown.enter.native="search"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button
          size="mini"
          class="search_btn"
          type="primary"
          plain
          @click="search"
          >搜索</el-button
        ></el-col>
    </el-row>
    <!-- 列表显示客户信息 -->
    <!-- 注selection-change为选择项改变时的事件 stripe为斑马纹 -->
    <el-table id="el-table" :data="lists" stripe>
      <el-table-column type="selection" width="55px"></el-table-column>
      <el-table-column label="登录编号" prop="operationlog_id"></el-table-column>
      <el-table-column
        label="账号"
        prop="user_account"
      ></el-table-column>
      <el-table-column
        label="用户名"
        prop="user_name"
      >
      </el-table-column>
      <el-table-column
        label="操作内容"
        prop="content"
      >
      </el-table-column>
      <el-table-column
        label="请求ip"
        prop="request_ip"
      >
      </el-table-column>
      <el-table-column
        label="类型"
        prop="type"
      >
      </el-table-column>
      <el-table-column
        label="模块"
        prop="module"
      >
      </el-table-column>
      <el-table-column label="操作时间" prop="operation_time">
      <template slot-scope="scope">
        <span>{{scope.row.operation_time | formatDate}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" align="middle" justify="center" id="bottom">
      <!-- 分页栏 -->
      <el-col :span="8">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="currPageChange"
          :current-page="curr_page"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入http
import http from '@/utils/httpUtil'
export default {
  data () {
    return {
      userName: '',
      account: '',
      direction: 'rtl',
      drawer: false,
      labelPosition: 'left',
      gotop: true,
      isShow: false,
      updateShow: false,
      action: {
        operationlogList: 'ssmService/operationLog/selectPageOperationLog',
        selectOperationLogById: 'ssmService/operationlog/selectOperationLogById'
      },
      lists: [],
      permission: [],
      total: 0,
      page_size: 10,
      curr_page: 1,
      operationlog_id: null
    }
  },
  mounted () {
    this.getOperationLogList()
  },
  methods: {
    // 当前页总条数改变时函数
    pageSizeChange (pageSize) {
      this.userName = ''
      this.account = ''
      this.getOperationLogList(
        this.userName,
        this.account,
        1,
        pageSize
      )
    },
    // 当前页改变时函数
    currPageChange (currPage) {
      this.userName = ''
      this.account = ''
      this.getOperationLogList(
        this.userName,
        this.account,
        currPage,
        this.page_size
      )
    },
    // 获取租出列表
    getOperationLogList (
      userName = null,
      account = null,
      curr_page = 1,
      page_size = 10
    ) {
      const params = {
        curr_page: curr_page,
        page_size: page_size
      }
      if (userName !== null && userName !== '') {
        params['user_name'] = userName
      }
      if (account !== null && account !== '') {
        params['user_account'] = account
      }
      http.xhrGet(this, this.action.operationlogList, params, res => {
        // console.log(res)
        // 总条数，当前页，当前页最大条数，数据
        this.total = res.data.total
        this.curr_page = res.data.pageNum
        this.page_size = res.data.pageSize
        this.lists = res.data.list
      })
    },
    // 搜索
    search () {
      let userName = this.userName
      let account = this.account
      this.getOperationLogList(userName, account, 1, 10)
    }
  },
  components: {
  },
  // 过滤器
  filters: {
    formatDate (value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return ''
      } else {
        let date = new Date(value)
        let y = date.getFullYear() // 年
        let MM = date.getMonth() + 1 // 月
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate() // 日
        d = d < 10 ? '0' + d : d
        let h = date.getHours() // 时
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes() // 分
        m = m < 10 ? '0' + m : m
        let s = date.getSeconds() // 秒
        s = s < 10 ? '0' + s : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      }
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/reset.css";
@import "../../assets/css/client.css";
</style>
